<template>
  <div class="precent-warpper" v-mounted="size">
    <h1 class="precent-text">{{ precent.toFixed(1) }}%</h1>
    <div class="wave-box" ref="waveBoxRef">
      <svg
        class="waves"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28"
        preserveAspectRatio="none"
        shape-rendering="auto"
      >
        <defs>
          <path
            id="gentle-wave"
            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
          />
        </defs>
        <g class="parallax">
          <use
            xlink:href="#gentle-wave"
            x="48"
            y="0"
            fill="rgba(173,216,230,0.7)"
          />
          <use
            xlink:href="#gentle-wave"
            x="48"
            y="3"
            fill="rgba(173,216,230,0.5)"
          />
          <use
            xlink:href="#gentle-wave"
            x="48"
            y="5"
            fill="rgba(173,216,230,0.3)"
          />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#ADD8E6" />
        </g>
      </svg>
      <div class="wave-bot"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const waveBoxRef = ref(null);
const props = withDefaults(defineProps<{ precent?: number; size?: number }>(), {
  precent: 0,
  size: 200,
});
const vMounted = {
  mounted(el, binding) {
    el.style.setProperty("--size", binding.value + "px");
  },
};
onMounted(() => {
  const bot = (props.size * props.precent) / 100 - props.size;
  console.log("bot", bot);
  waveBoxRef.value.style.bottom = bot + "px";
});
watch(
  () => props.precent,
  (newval) => {
    const bot = (props.size * newval) / 100 - props.size;
    waveBoxRef.value.style.bottom = bot + "px";
  }
);
</script>

<style lang="scss" scoped>
.precent-warpper {
  --size: 300px;
  position: relative;
  width: var(--size);
  height: var(--size);
  background-color: #fff;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid rgb(121, 155, 249);
  box-shadow: 0 0 10px #fff;
  .precent-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: var(--size);
    font-size: 50px;
    font-weight: 700;
    z-index: 10;
    color: rgb(121, 155, 249);
  }
  .wave-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: bottom 0.5s ease-in-out;
    bottom: calc(0 - var(--size));
    .wave-bot {
      background-color: #add8e6;
      height: 100%;
    }
    .waves {
      position: relative;
      width: 100%;
      height: 100%;
      margin-bottom: -7px;
      /*Fix for safari gap*/
      height: calc(var(--size) * 0.25);
    }

    /* Animation */

    .parallax > use {
      animation: move-forever 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 2s;
    }

    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 4s;
    }

    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 6s;
    }

    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 8s;
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }

      100% {
        transform: translate3d(85px, 0, 0);
      }
    }
  }
}
</style>
